<template>
  <div class="input-range-box">
    <a-input-number
      v-model.number="start"
      :placeholder="placeholder"
      hide-button
      @change="changeHandle"
    />
    <span class="divide">{{ props.divides }}</span>
    <a-input-number
      v-model.number="end"
      :placeholder="placeholder"
      hide-button
      @change="changeHandle"
    />
  </div>
</template>

<script setup lang="ts">
  import { ref, watch, PropType } from 'vue';

  const props = defineProps({
    modelValue: {
      type: Array as PropType<number[]>,
      default: () => {
        return [NaN, NaN];
      },
    },
    divides: {
      type: String,
      default: '至',
    },
    placeholder: {
      type: String,
      default: '请输入',
    },
    isReset: {
      type: Boolean,
      default: false,
    },
  });
  const start = ref(NaN);
  const end = ref(NaN);
  const emit = defineEmits(['update:modelValue', 'update:isReset']);
  const nowVal = ref<number[]>(props.modelValue);
  watch(
    () => props.modelValue,
    (n: any) => {
      if (n && n?.length > 0) {
        const [a, b] = n;
        start.value = a;
        end.value = b;
      } else {
        start.value = NaN;
        end.value = NaN;
      }
    },
    {
      deep: true,
    }
  );
  const changeHandle = () => {
    nowVal.value = [start.value, end.value];
    emit('update:modelValue', nowVal.value);
  };
</script>

<style lang="less" scoped>
  .input-range-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .divide {
      margin-right: 6px;
    }
  }
</style>
